<template>
    <div class="areaCan">
        <el-cascader
            ref='area'
            class="inputs"
            :options="optionsStore"
            @change="changeArea"
            @active-item-change="handleItemChangeStore"
            :props="locateProp"
            placeholder="请选择区域"
            :value="orderArea"
            size="small"
        >
        </el-cascader>
        <el-select
            class="inputs"
            v-model="shop" 
            placeholder="请选择门店"
            ref="shop"
            size="small"
            @change="chooseShop"
        >
            <el-option
                v-for="item in storeList"  
                :key="item.id"
                :label="item.theNameOfTheStore"
                :value="item.theFactory"
            />
        </el-select>
    </div>
</template>
<script>
import { getProvince, getCity, getDistrict, getShop } from './axios'
export default {
    data() {
        return {
            // 预约地区
            area: '',
            // 预约门店选项
            storeList: [],
            // 预约地址连级选择
            optionsStore: [],
            // 默认选择的地址(预约地址)
            orderArea: [],
            locateProp: {
                value: 'value',
                label: 'value',
                children: 'cities'
            },
            shop: ''
        }
    },
    methods: {
        getResult() {
            return this.shop
        },
        chooseShop(shop) {
            this.$emit('changeShop', this.area, shop)
        },
        // 预约地址选择市
        changeArea(e) {
            let province = this.optionsStore.find(ele => ele.provinceName === e[0])
            let city = province.cities.find(ele => ele.cityName === e[1])
            let str = '';
            getShop(city.cityCode).then(res => {
                if(res.data.status === 200) {
                    this.storeList = res.data.result
                    if(res.data.result.length === 0) {
                        this.shop = ''
                    }else{
                        let pass = false
                        res.data.result.map(ele => {
                            if(ele.theFactory === this.shop) {
                                pass = true
                            }
                        })
                        !pass && (this.shop = '')
                    }
                }
            })
            Array.isArray(e) && e.map((ele, index) => {
                str += (index < e.length - 1 ? `${ele}-` : ele)
            })
            this.area = str;
        },
        // 预约地址省市选择
        handleItemChangeStore(item) {
            let clue, index;
            this.optionsStore.map((ele, ind) => {
                if(ele.provinceName === item[0]) {
                    clue = ele.provinceCode
                    index = ind
                }
            })
            item.length === 1 && clue && getCity(clue).then(res => {
                if(res.status === 200) {
                    let temp = res.data.result
                    temp.forEach(ele => {
                        ele.value = ele.cityName
                    })
                    this.optionsStore[index].cities = temp
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        // 清空地址
        clearArea() {
            this.orderArea = []
            this.shop = ''
        }
    },
    mounted() {
        // 获取省
        getProvince().then(res => {
            if(res.data.status === 200) {
                let temp = res.data.result;
                temp.forEach(ele => {   
                    ele.value = ele.provinceName
                    ele.cities = []
                })
                this.optionsStore = temp
            }
        }).catch(err => {
            console.log('err: ', err)
        })
    }
}
</script>
<style scoped>
    .areaCan{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }
    .inputs{
        width: 48%;
    }
</style>
